<script lang="ts" setup>
import ProductBox from "../Common/ProductBox.vue";
import { ref } from "vue";
//@ts-ignore
import { pcaTextArr } from "element-china-area-data";
const open = ref<boolean>(false);

const handleOk = (e: MouseEvent) => {
  console.log(e);
  open.value = false;
};

const dataSource = ref([
  {
    key: "1",
    name: "xxxx",
    phone: "xxxx",
    postCode: "xxxx",
    address: "xxxxxxxx",
  },
]);

const columns = ref([
  {
    title: "联系人",
    dataIndex: "name",
    key: "name",
  },
  {
    title: "手机号码",
    dataIndex: "phone",
    key: "phone",
  },
  {
    title: "地址",
    dataIndex: "address",
    key: "address",
  },
  {
    title: "邮编",
    dataIndex: "postCode",
    key: "postCode",
  },
  {
    title: "操作",
    dataIndex: "operation",
    key: "operation",
  },
]);

const form = ref({
  username: "",
});

const selectedOptions = ref([]);
</script>
<template>
  <div class="pr-5 pl-5">
    <ProductBox title="地址管理">
      <a-button type="primary" class="mb-5" @click="open = true">
        新增地址
      </a-button>
      <a-table :scroll="{ x: 1000, }" :dataSource="dataSource" :columns="columns" />
    </ProductBox>
  </div>

  <a-modal v-model:open="open" title="新增地址" @ok="handleOk">
    <a-form class="mt-5" :labelCol="{
      span: 5,
    }">
      <a-form-item label="联系人" name="username">
        <a-input v-model:value="form.username" />
      </a-form-item>
      <a-form-item label="手机号码" name="username">
        <a-input v-model:value="form.username" />
      </a-form-item>
      <a-form-item label="所在地区">
        <el-cascader size="large" :options="pcaTextArr" v-model="selectedOptions" placeholder="请选择"></el-cascader>
      </a-form-item>
      <a-form-item label="详细地址" name="username">
        <a-input v-model:value="form.username" />
      </a-form-item>
      <a-form-item label="邮编" name="username">
        <a-input v-model:value="form.username" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<style lang="scss" scoped></style>
